<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>全年统计数据（可选5项）
          </span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="显示统计项">
              <el-checkbox-group v-model="form.yearStats">
                <el-checkbox label="emergency" value="emergency">全年突发事件</el-checkbox>
                <el-checkbox label="unicom_city" value="unicom_city">联通城市量</el-checkbox>
                <el-checkbox label="airlines" value="airlines">运营航司量</el-checkbox>
                <el-checkbox label="airroutes" value="airroutes">航线总量</el-checkbox>
                <el-checkbox label="warning_infos" value="warning_infos">全年预警信息总量</el-checkbox>
                <el-checkbox label="tourist" value="tourist">游客吞吐量</el-checkbox>
                <el-checkbox label="expresses" value="expresses">货邮吞吐量</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" :style="{marginTop: '15px'}">
        <div slot="header" class="clearfix">
          <span>统计图表（可选1项）
          </span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="图表数据项">
              <el-radio-group v-model="form.middleBottom">
                <el-radio label="1">全年不安全事件统计</el-radio>
                <el-radio label="2">全年游客吞吐量统计</el-radio>
                <el-radio label="3">全年预警信息量统计</el-radio>
                <el-radio label="4">全年货邮吞吐量统计</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" :style="{marginTop: '15px'}">
        <div slot="header" class="clearfix">
          <span>旅客吞吐量排名
          </span>
        </div>
        <el-row>
          <el-col :span="4">
            <el-form-item label="机场数量">
              <el-input v-model="form.leftTop.num"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" :style="{marginTop: '15px'}">
        <div slot="header" class="clearfix">
          <span>货邮吞吐量排名
          </span>
        </div>
        <el-row>
          <el-col :span="4">
            <el-form-item label="机场数量">
              <el-input v-model="form.leftBottom.num"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="排名顺序">
              <el-select v-model="form.leftBottom.sort" placeholder="请选择排名顺序" :style="{width: '100%'}">
                <el-option label="正序排名" value="1"></el-option>
                <el-option label="倒序排名" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" :style="{marginTop: '15px'}">
        <div slot="header" class="clearfix">
          <span>右上排名图表
          </span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="图表数据项">
              <el-radio-group v-model="form.rightTop.type">
                <el-radio label="normals">机场正常率排名</el-radio>
                <el-radio label="delays">机场延误率排名</el-radio>
                <el-radio label="cancels">机场取消率排名</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="排名顺序">
              <el-select v-model="form.rightTop.sort" placeholder="请选择排名顺序" :style="{width: '100%'}">
                <el-option label="正序排名" value="1"></el-option>
                <el-option label="倒序排名" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" :style="{marginTop: '15px'}">
        <div slot="header" class="clearfix">
          <span>右下排名图表
          </span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="图表数据项">
              <el-radio-group v-model="form.rightBottom.type">
                <el-radio label="1">航班量排名</el-radio>
                <el-radio label="2">联通城市量排名</el-radio>
                <el-radio label="3">运营航司量排名</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="机场数量">
              <el-input v-model="form.rightBottom.num"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="排名顺序">
              <el-select v-model="form.rightBottom.sort" placeholder="请选择排名顺序" :style="{width: '100%'}">
                <el-option label="正序排名" value="1"></el-option>
                <el-option label="倒序排名" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <div style="text-align: center;margin-top: 15px;">
        <el-button type="primary" @click="handleSaveConfig">保存配置</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import * as ScreenApi from '@/api/system/screen'
export default {

  name: 'ScreenConfig',

  data() {
    return {
      form: {
        yearStats: ["emergency", "unicom_city", "airlines", "airroutes", "warning_infos"],
        middleBottom: "1",
        leftTop: {
          num: 6
        },
        leftBottom: {
          num: 6,
          sort: "1"
        },
        rightTop: {
          type: 'normals',
          num: 6,
          sort: "1"
        },
        rightBottom: {
          type: '1',
          num: 6,
          sort: "1"
        }
      }
    }
  },

  methods: {
    handleSaveConfig() {
      let data = [
      	{sId: 1,
      	scName: 'year_stats',
      	scConfig: JSON.stringify(this.form.yearStats)},
      	{sId: 1,
      	scName: 'right_top',
      	scConfig: this.form.rightTop.type}];
      ScreenApi.updateConfig(data).then(res => {
        console.log(res);
        this.$modal.msgSuccess('配置保存成功');
      })
    }
  }
}

</script>
<style lang="scss" scoped>
::v-deep {

  .el-checkbox__label,
  .el-radio__label {
    color: white;
  }
}

</style>
